<template>
  <div class="city">
    <city-header></city-header>
    <div class="input-box">
      <input v-model="keyword" type="text" placeholder="输入城市名或拼音">
    </div>
    <div class="search-content" v-show="keyword" ref="search">
      <ul>
        <li class="search-item border-bottom"
            v-for="item in searchResult"
            :key="item.id"
            @click="handleCityClick(item.name)"
        >{{item.name}}
        </li>
        <li class="search-item border-bottom" v-if="!searchResult.length">没有搜索结果</li>
      </ul>
    </div>
    <city-list :cities="cities" :hotCities="hotCities" :text="text"></city-list>
    <alphabet :cities="cities" @change="handleChange"></alphabet>
  </div>
</template>

<script type="text/ecmascript-6">
  import { mapMutations } from 'vuex'
  import axios from 'axios'
  import BScroll from 'better-scroll'

  import CityHeader from './components/CityHeader'
  import CityList from './components/CityList'
  import Alphabet from './components/Alphabet'

  export default {
    data () {
      return {
        cities: {},
        hotCities: [],
        text: '',
        keyword: '',
        timer: null,
        searchResult: []
      }
    },
    mounted () {
      axios.get('/api/city.json')
        .then(data => {
          const _data = data.data
          if (_data.ret) {
            this.cities = _data.data.cities
            this.hotCities = _data.data.hotCities
          }
        })
      this.scroll = new BScroll(this.$refs.search)
    },
    methods: {
      handleChange (text) {
        this.text = text
      },
      handleCityClick (cityName) {
        this.changeCity(cityName)
        this.$router.push('/')
      },
      ...mapMutations(['changeCity'])
    },
    watch: {
      keyword () {
        if (!this.keyword) {
          this.searchResult = []
          return
        }
        if (this.timer) {
          clearTimeout(this.timer)
        }
        let result = []
        this.timer = setTimeout(() => {
          for (let item in this.cities) {
            result = result.concat(this.cities[item].filter((_item) => {
              return (_item.name.includes(this.keyword) || _item.spell.includes(this.keyword))
            }))
          }
          this.searchResult = result
        }, 100)
      }
    },
    components: {
      CityHeader,
      CityList,
      Alphabet,
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  @import "~css/variable.styl"
  .city
    .input-box
      padding 0 .1rem
      height: .72rem
      line-height: .7rem
      background $color-theme
      input
        box-sizing border-box
        text-align center
        padding 0 .1rem
        width 100%
        height .62rem
        border-radius .06rem
        color #666
    .search-content
      overflow: hidden
      position absolute
      top 1.58rem
      right 0
      left 0
      bottom 0
      background #eee
      z-index 1
      .search-item
        padding-left .2rem
        line-height: .62rem
        background #fff
        color #666
</style>
